<template>
    <div>
        <mt-header class="m_mint_header" fixed title="充币">
            <router-link to="/m/fund-wallet" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
            <router-link to="/m/recharge-record" slot="right">
                <mt-button>充币记录</mt-button>
            </router-link>
        </mt-header>
        <div class="h50"></div>
        <div style="padding: .3rem;">
            <p>充值币种 ETH</p>
            <div class="recharge_qrcode">
                <div ref="qrcode" class="qrlogo" id="qrcode"></div>
                <p><a href="javascript:;" @click="downloadImg">保存二维码</a></p>
                <br>
            </div>
            <div class="recharge_address">
                <p>充币地址</p>
                <p id="shareLink" style="display: none;">{{walletAddress}}</p>
                <div>
                    <el-input disabled size="mini" :value="walletAddress"/>
                    <p>
                        <el-button type="text" @click.native="copyLink">复制地址</el-button>
                    </p>
                </div>
            </div>
            <div style="padding:.5rem;">
                <p>1、禁止向ETH地址充币除ETH之外的资产，任何充入ETH地址的非ETH资产将不可找回。</p>
                <p>2、使用ETH地址充币需要1个网络确认才能到账</p>
                <p>3、充币最小额度为0.00005ETH,小于0.00005ETH将无法到账</p>
                <!--<p>4、默认充币至资金账户，若想进行理财，可从资金账户转入理财账户。</p>-->
            </div>
        </div>
    </div>
</template>

<script>

    import QRCode from 'qrcodejs2'

    export default {
        name: "Recharge",
        data() {
            return {
                walletAddress: '',
            }
        },
        mounted() {
            this.requestGetWallet();

        },
        methods: {
            requestGetWallet() {
                this.requestAxios.requestWeb('post', webUserBalanceApi + '/get_wallet.do', null, (response) => {
                    this.walletAddress = response.data;
                    this.qrcode();
                })
            },

            qrcode() {
                let qrcode = new QRCode('qrcode', {
                    width: 100,
                    height: 100, // 高度  [图片上传失败...(image-9ad77b-1525851843730)]
                    text: this.walletAddress // 二维码内容
                    // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                    // background: '#f0f'
                    // foreground: '#ff0'
                })
                // console.log(qrcode)
            },

            downloadImg() {
                let src = this.$refs.qrcode.getElementsByTagName('img')[0].src;
                let a = document.createElement('a');          // 创建一个a节点插入的document
                let event = new MouseEvent('click');          // 模拟鼠标click点击事件
                a.download = 'qrcode';                        // 设置a节点的download属性值
                a.href = src;                                 // 将图片的src赋值给a节点的href
                a.dispatchEvent(event)
            },

            copyLink() {
                var Url2 = document.getElementById("shareLink").innerText;
                var oInput = document.createElement('input');
                oInput.value = Url2;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                this.$toast({message: this.$t('toast.success'), duration: 1000});
            }
        }
    }
</script>

<style>
    .qrlogo {
        width: 2rem;
        height: 2rem;
        text-align: center;
        margin: .3rem auto;
    }

    .recharge_qrcode {
        text-align: center;
    }

    .recharge_qrcode a {
        color: #e68d55;
    }

    .recharge_qrcode a:focus, .recharge_qrcode a:hover {
        color: #e68d55;
    }

    .recharge_address > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .recharge_address > div .el-input__inner {
        background: transparent;
        border: none;
        padding: 0;
    }

    .recharge_address .el-input__inner {
        color: #333333 !important;
    }

    .recharge_address > div .el-button {
        color: #e68d55;
        border: 1px solid #e68d55;
        padding: .06rem .2rem;
        font-size: .22rem;
        border-radius: .2rem;
        font-weight: bold;
    }

</style>
